<template>
  <!--财务管理-->
  <div>
    <!--账户信息-->
    <SectionContainer class="u-p20">
      <SectionTitle class="u-clearfix">
        账户信息
        <el-tooltip
          slot="tip"
          class="item"
          effect="dark"
          placement="top"
        >
          <div slot="content">
            1、账户信息凌晨2:00更新，请以隔天为准<br>
            2、请联系管理员充值
          </div>
          <i class="iconfont iconfont-10 c-hint-major"></i>
        </el-tooltip>
      </SectionTitle>

      <el-row type="flex">
        <el-col>
          <div class="c-text-high u-fs36 u-mb10">
            <AnimateNumber :number="remain"></AnimateNumber>
          </div>
          <div class="c-text-minor">账户余额（元）</div>
        </el-col>
        <el-col>
          <div class="c-text-high u-fs36 u-mb10">
            <AnimateNumber :number="sumCost"></AnimateNumber>
          </div>
          <div class="c-text-minor">累计消耗（元）</div>
        </el-col>
      </el-row>
    </SectionContainer>

    <!--交易明细-->
    <SectionContainer class="u-p20">
      <SectionTitle>交易明细</SectionTitle>

      <!-- 表格 -->
      <TableFull
        :data="tableData"
        :total="tableTotal"
        :current-page="page.pageNo"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
        <el-form
          class="m-filter"
          inline
          slot="handle"
        >
          <el-form-item>
            <el-date-picker
              :clearable="false"
              value-format="yyyy-MM-dd"
              size="small"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="DATERANGE_OPTIONS"
              v-model="filter.daterange"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select
              size="small"
              placeholder="请选择交易类型"
              v-model="filter.transactionType"
            >
              <el-option
                v-for="item in PAY_TYPE"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="search"
              size="small"
              type="primary"
            >查询</el-button>
          </el-form-item>
        </el-form>
        <template slot="column">
          <el-table-column
            :resizable="false"
            align="center"
            v-for="(item, index) in tableColumn"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
          >
            <template slot-scope="scope">
              <!-- 交易类型 -->
              <template v-if="item.prop === 'transactionType'">{{mapValue(PAY_TYPE, scope.row.transactionType)}}</template>
              <!-- 备注 -->
              <template v-else-if="item.prop === 'remarks'">
                <span
                  class="u-prewrap"
                  v-html="getTableRemarks(scope.row)"
                ></span>
              </template>
              <!-- 其他 -->
              <template v-else>{{scope.row[item.prop]}}</template>
            </template>
          </el-table-column>
        </template>
      </TableFull>
    </SectionContainer>
  </div>
</template>

<script>
import Moment from "moment";
import { mapState } from "vuex";

import SectionContainer from "@/components/section-container";
import SectionTitle from "@/components/section-title";
import AnimateNumber from "@/components/animate-number";
import TableFull from "@/components/table-full";

import DATERANGE_OPTIONS from "@/assets/js/daterange-option";
import { PAY_TYPE } from "@/assets/js/common-option";
import { sessionStorage, mapValue } from "@/utils";
import { fetchFinancialSumCost, fetchFinancialTradingList } from "@/api";
import permissionMixin from "@/mixins/permission";

export default {
  mixins: [permissionMixin],
  components: {
    SectionContainer,
    SectionTitle,
    AnimateNumber,
    TableFull
  },
  data() {
    return {
      PAY_TYPE,
      DATERANGE_OPTIONS,

      user: sessionStorage.get("USER"),

      filter: {
        daterange: [
          Moment()
            .subtract(3, "months")
            .format("YYYY-MM-DD"),
          Moment().format("YYYY-MM-DD")
        ],
        transactionType: 0
      },

      page: {
        pageNo: 1,
        pageSize: 50
      },

      // 累计消耗
      sumCost: 0,

      // 表格
      tableColumn: [
        {
          label: "交易时间",
          prop: "dealTime"
        },
        {
          label: "交易类型",
          prop: "transactionType"
        },
        {
          label: "交易金额(元)",
          prop: "transactionAmount"
        },
        // {
        //   label: "账户余额(元)",
        //   prop: "afterBalance"
        // },
        {
          label: "备注",
          prop: "remarks"
        }
      ],
      tableData: [],
      tableTotal: 0
    };
  },
  computed: {
    ...mapState({
      remain: state => state.AccountRemain.remain
    })
  },
  methods: {
    mapValue,

    // 累计消耗
    fetchFinancialSumCost() {
      fetchFinancialSumCost({
        query: {
          userId: this.user.userId
        }
      }).then(res => {
        this.sumCost = res.data.historicalCost;
      });
    },
    // 查询
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    // 获取表格数据
    getTable() {
      this.tableData = [];
      this.tableTotal = 0;
      fetchFinancialTradingList({
        query: {
          ...this.page,
          userId: this.user.userId,
          startDate: this.filter.daterange[0],
          endDate: this.filter.daterange[1],
          transactionType: this.filter.transactionType
        }
      }).then(res => {
        this.tableData = res.data.transactionDetails || [];
        this.tableTotal = res.data.transactionDetailsCount;
      });
    },
    // 计算备注
    getTableRemarks({ transferNote, rebates, remarks }) {
      let ret = [];
      if (transferNote) {
        ret.push(`${transferNote}；`);
      }
      if (rebates !== null) {
        ret.push(`返点${rebates}%；`);
      }
      if (remarks) {
        ret.push(`${remarks}；`);
      }
      return ret.join("\n");
    },
    // 分页
    currentChange(val) {
      this.page.pageNo = val;
      this.getTable();
    },
    sizeChange(val) {
      this.page.pageSize = val;
      this.getTable();
    }
  },
  created() {
    this.fetchFinancialSumCost();
    this.getTable();
  }
};
</script>